/**
 * 修改view框架的主题
 */
@import '~view-design/src/styles/index.less';
@import "./components/css/common-var.less";

@primary-color: #00b96b;

/**
 * 统一设置各个主题背景色和边框圆角
 */
.enable-background {
  background: var(--theme-color) !important;
  border-radius: 5px !important;

  // btn系列
  .ivu-btn-default:not([disabled]) {
    background: var(--dropdown-bg-color) !important;
    color: var(--font-color) !important;
    border-color: var(--border-color);

    &:hover {
      background: var(--on-theme-bg-color) !important;
      color: @primary-color !important;
      border-color: @primary-color !important;
    }
  }

  .reply-header {
    color: var(--font-color) !important;
  }
}

.dropdown-background {
  color: var(--font-color);
  background: var(--dropdown-bg-color);
  border: 1px solid rgba(255, 255, 255, 0.2);

  .ivu-dropdown-item {
    color: var(--font-color);
  }
}

.dropdown-item-all-hover {
  .ivu-dropdown-item:hover, .selected, .ivu-dropdown-item-selected {
    background: var(--dropdown-item-hover);
  }
}

.ivu-dropdown-menu {
  margin-bottom: 0;
}

.ivu-poptip-popper[x-placement^="bottom"] {
  padding: 5px 0 7px 0;
}

.ivu-poptip-popper {
  z-index: 1050 !important;
  .ivu-poptip-arrow {
    display: none !important;
  }

  .ivu-poptip-inner {
    background: var(--dropdown-bg-color);
    color: var(--font-color);
    font-weight: normal;
    border-radius: 6px;
  }
}

.normal-background {
  .ivu-poptip-inner {
    background: @dropdown-background;
    border-color: @border-color_normal;
    color: @dark-font-color;
  }

  .ant-checkbox-wrapper .ant-checkbox-inner {
    background: unset;
  }

  .ant-checkbox-checked .ant-checkbox-inner {
    background: @primary-color;
    border-color: @primary-color;
  }

  .user-info-card-box .ant-popover-content .ant-popover-inner .ant-popover-inner-content {
    .user-card-body {
      .user-card-userInfos {
        color: @dark-font-color;
        .username {
          color: @dark-font-color;
        }

        .signature {
          color: @light-font-color;
        }
      }
    }

    .user-card-footer {
      .follow-fans .footer-item {
        color: @light-font-color;

        .number {
          color: @grey-white-font-color;
        }
      }

      .actions .ivu-btn {
        color: @dark-font-color;

        &:hover {
          background: @dropdown-background;
        }
      }
    }
  }

  .ivu-modal .ivu-modal-content {
    color: @dark-font-color;
    background: @dropdown-background;

    .ivu-modal-header-inner {
      color: @dark-font-color !important;
    }

    .auth-body {
      color: @dark-font-color;

      .login-body {
        .login-main {
          .title {
            color: @light-font-color;
          }

          .ivu-btn-default {
            border-color: @border-color_normal;
            color: @dark-font-color;
            background-color: @dropdown-background;

            &:hover {
              border-color: @primary-color;
              color: @primary-color;
            }
          }
        }

        .site-flag .site-tips .t3 {
          color: @light-font-color;
        }

        .ivu-input {
          color: @dark-font-color;
        }

        .ivu-btn-text {
          color: @light-font-color;

          &:hover {
            color: @dark-font-color;
            background-color: @dropdown-background;
          }
        }
      }
    }
  }

  .ivu-btn-success, .ivu-btn-primary {
    color: #FFFFFF;
  }

  .ivu-btn-text {
    color: @light-font-color !important;
  }

  // 滚动条全局美化
  .beauty-scroll {
    &:hover::-webkit-scrollbar-thumb {
      background-color: #8B8B8B !important;
    }
  }

  // 通用插件相关工具栏
  .data-card-toolbar {
    .data-toolbar-group {
      .data-toolbar-item {
        .ant-select-arrow {
          color: @light-font-color;
        }

        .ant-select-selection {
          color: @dark-font-color;
          border-color: @border-color_normal;
          background-color: @dropdown-item-hover;
        }

        .ant-select-dropdown {
          background-color: @dropdown-background;

          .ant-select-dropdown-menu-item {
            color: @light-font-color;

            &:hover {
              color: @dark-font-color;
              background-color: @dropdown-item-hover;
            }
          }

          .ant-select-dropdown-menu-item-selected {
            background-color: @dropdown-item-hover;
          }

          .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
            background-color: @dropdown-item-hover;
          }
        }

        .ant-select-dropdown-menu {
          &::-webkit-scrollbar-thumb {
            background-color: unset;
          }

          &:hover::-webkit-scrollbar-thumb {
            background-color: rgba(139, 139, 139, 0.53);
          }
        }
      }
    }
  }

  .ivu-input {
    color: @dark-font-color;
  }
}

.ivu-input {
  border-color: @border-color_normal;
  color: var(--font-color);
  background: unset;

  &::placeholder {
    color: @grey-white-font-color;
  }
}

.ivu-btn {
  border-radius: 6px;
  //color: var(--font-color);
}

.ivu-btn-text {
  color: var(--title-color);

  &:hover {
    //background-color: var(--dropdown-bg-color);
  }
}

.ivu-btn:focus, .ivu-input:focus, .ivu-btn-text:focus {
  box-shadow: none !important;
}

.ivu-btn[disabled], .ivu-btn[disabled]:hover {
  color: var(--title-color) !important;
  background-color: unset !important;
  border-color: @border-color_normal !important;
}

.ivu-input-suffix {
  .ivu-btn, ivu-btn:hover, .ivu-btn[disabled], .ivu-btn[disabled]:hover {
    border-color: transparent !important;
  }
}

.ivu-select-visible .ivu-select-selection {
  border-color: @primary-color;
  outline: 0;
  box-shadow: unset;
}

.ivu-select {
  .ivu-select-dropdown {
    overflow-y: hidden;

    .ivu-select-dropdown-list {
      margin-bottom: 0;
    }

    &:hover {
      overflow-y: auto;
    }

    &::-webkit-scrollbar-thumb {
      background-color: unset;
      border-radius: 4px;
    }

    &::-webkit-scrollbar {
      width: 7px;
    }

    &:hover::-webkit-scrollbar {
      width: 7px;
    }

    &:hover::-webkit-scrollbar-thumb {
      background-color: #8B8B8B;
      border-radius: 4px;
    }
  }
}

.ghost-btn {
  color: var(--font-color) !important;
  background: unset !important;
  border-color: @border-color_normal !important;

  &:hover {
    color: @primary-color !important;
    border-color: @primary-color !important;
  }
}

.ivu-badge {
  .ivu-badge-count {
    box-shadow: none;
    border: none;
  }
}

.ivu-modal {
  font-family: 'Chinese Quote', 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji';

  .ivu-modal-content {
    color: var(--font-color);
    background: var(--modal-bg-color);

    .ivu-modal-header {
      border-color: var(--border-color);

      .ivu-modal-header-inner {
        color: var(--font-color);
      }
    }

    .ivu-icon-ios-close {
      color: @grey-white-font-color;
    }
  }
}

// 用户信息卡片
.user-info-card-box {
  z-index: 99;

  .ant-popover-content {
    width: 330px;

    .ant-popover-arrow {
      display: none;
    }

    .ant-popover-inner {
      background: var(--modal-bg-color);
      box-shadow: 0 8px 16px 4px rgba(0, 0, 0, .04);
      border: 1px solid var(--border-color);
      border-radius: 8px;

      .ant-popover-inner-content {
        color: var(--font-color);
        padding: 0;

        .user-card-body {
          display: flex;
          padding: 20px 18px 20px 24px;

          .user-card-avatar {
            margin-top: 5px;
          }

          .user-card-userInfos {
            margin-left: 20px;
            width: 220px;

            .username {
              color: var(--font-color);
              font-weight: 700;
              font-size: 15px;
              line-height: 22px;
              align-items: center;
              display: flex;

              .name {
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                max-width: 90%;
              }

              .iconfont {
                font-size: 20px;
                margin-bottom: 5px;
              }
            }

            .user-signature {
              .signature-text {
                color: var(--title-color);
                margin-top: 8px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; /* 限制最多显示两行 */
                word-break: break-all; /* 防止长单词换行问题 */
              }
            }

            .info-item {
              display: flex;
              margin-bottom: 8px;
              min-height: 20px;
              line-height: 20px;

              .iconfont {
                margin-right: 5px;
                margin-top: 1px;
              }

              &:last-child {
                margin-bottom: 0;
              }

              .info-detail {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1; /* 限制最多显示一行 */
                word-break: break-all; /* 防止长单词换行问题 */
              }
            }
          }
        }

        .user-card-footer {
          display: flex;
          justify-content: space-between;
          border-top: 1px solid @border-color_normal;
          padding: 12px 18px 12px 24px;

          .follow-fans {
            display: flex;

            .footer-item {
              margin-right: 24px;
              color: var(--title-color);
              margin-top: 6px;

              .number {
                margin-left: 5px;
                color: var(--font-color);
                word-break: break-all;
              }

              &:last-child {
                margin-right: 0;
              }
            }
          }

          .actions {
            .ivu-btn {
              background: transparent;
              border-color: var(--border-color);
              color: var(--font-color);

              &:hover {
                color: @primary-color;
                background: var(--theme-color);
                border-color: @primary-color;
              }

              &:last-child {
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
  }
}

.ant-tooltip {
  padding-bottom: 0;

  .ant-tooltip-content {
    .ant-tooltip-arrow {
      display: none;
    }
  }
}

.un-select {
  -webkit-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
  -moz-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
  -ms-user-select: none; /* 禁止 DIV 中的文本被鼠标选中 */
  user-select: none;
}

.ilike {
  color: @like-color;
}

/deep/ .read-nav-tooltip {
  padding-bottom: 0 !important;
}

/deep/ .read-header-tooltip {
  padding-top: 0 !important;
}

/deep/ .ant-tooltip-inner {
  font-size: 12px;
}

// 滚动条全局美化
.beauty-scroll {
  overflow-y: hidden;

  &:hover {
    overflow-y: auto;
  }

  &::-webkit-scrollbar-thumb {
    background-color: unset;
    border-radius: 4px;
  }

  &::-webkit-scrollbar {
    width: 7px;
  }

  &:hover::-webkit-scrollbar {
    width: 7px;
  }

  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(139, 139, 139, 0.53);
    border-radius: 4px;
  }
}

.ant-checkbox-wrapper .ant-checkbox-inner {
  background: var(--dropdown-bg-color);
}

.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background: @primary-color;
}

.ant-checkbox-checked .ant-checkbox-inner {
  background: @primary-color;
  border-color: @primary-color;
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner {
  border-color: @primary-color;
}

.ant-checkbox-disabled .ant-checkbox-inner {
  background-color: #f5f5f5;
  border-color: #d9d9d9 !important;
}

// 标签相关
.tag-color-tooltip {
  .ant-tooltip-inner {
    font-size: 12px;
    background-color: rgba(165, 38, 38, 0.75);
    min-width: unset;
    min-height: unset;
    padding: 0;
    cursor: pointer;

    .tag-color-btn {
      width: 32px;
      height: 26px;
      border-radius: 3px;

      .hazy {
        width: 32px;
        height: 26px;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.5);
      }
    }
  }
}

// editor相关
// 编辑器
.am-engine, .am-engine-view {
  // ==================== 段落间距 =====================
  & > :not(p) {
    margin: 15px 0 !important;
  }

  & > p {
    margin: 8px 0 !important;

    span[data-card-key="image"] {
      margin: 8px 0 !important;
    }
  }

  & > ol {
    margin: 8px 0 !important;

    li {
      margin: 8px 0 8px 25px !important;
    }
  }

  & > ul {
    margin: 8px 0 !important;

    li {
      margin: 8px 0 !important;
    }

    li:not(.data-list-item) {
      margin: 8px 0 8px 15px !important;
    }
  }

  & > h2 {
    margin: 13px 0 !important;
  }

  & > h3 {
    margin: 11px 0 !important;
  }

  & > h4 {
    margin: 9px 0 !important;
  }

  & > h5 {
    margin: 8px 0 !important;
  }

  & > h6 {
    margin: 8px 0 !important;
  }

  .data-list-task [data-card-key="checkbox"] {
    margin-left: 0 !important;
  }

  // ==================== 代码块插件 =====================
  .data-codeblock-container {
    border-color: @border-color_normal;
    border-radius: 2px;

    .data-codeblock-content {
      .CodeMirror-sizer {
        .CodeMirror-lines {
          .CodeMirror-code {
            .CodeMirror-line {
              padding: 0 4px 0 8px;
            }
          }
        }
      }
    }

    .CodeMirror-line span, .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
      font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    }
  }

  // ==================== 表格插件 =====================
  .data-table {
    background: unset;
  }
}

.am-engine-placeholder:before {
  color: @placeholder-color !important;
}

// 工具栏
.editor-toolbar {
  display: flex;
  justify-content: center;

  .editor-toolbar-content {
    align-items: center;
    width: auto;

    .colorpicker-button-group:hover, .colorpicker-button-group:hover, .colorpicker-button-group-active {
      .toolbar-button {
        //border: unset;
      }
    }

    .toolbar-button {
      height: 32px;
    }
  }
}

// 可拖拽标识符
.data-card-dnd {
  width: 24px !important;
  border-radius: 4px;
  justify-content: center;

  .data-card-dnd-trigger {
    position: absolute;
    top: 0;
    left: 4px;

    .data-icon-drag {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

// 通用插件相关工具栏
.data-card-toolbar {

  .data-toolbar-group {
    box-shadow: 0 0 4px 0 rgba(225, 225, 225, 0.5);

    .data-toolbar-switch {
      .switch-btn {
        display: flex;
      }

      .switch-btn.switch-checked {
        background-color: @primary-color;
      }
    }

    .data-toolbar-item {
      display: flex;

      .data-toolbar-btn {
        display: flex;
        justify-content: center;

        .data-icon {
          width: 28px;
          height: 26px;
        }
      }

      .ant-select-arrow {
        color: var(--font-color);
      }

      .ant-select-selection {
        color: var(--font-color);
        border-color: var(--border-color);
        background-color: var(--dropdown-item-hover);
      }

      .ant-select-dropdown {
        background-color: var(--dropdown-bg-color);

        .ant-select-dropdown-menu-item {
          color: var(--title-color);

          &:hover {
            color: var(--font-color);
            background-color: var(--dropdown-item-hover);
          }
        }

        .ant-select-dropdown-menu-item-selected {
          background-color: var(--dropdown-item-hover);
        }

        .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
          background-color: var(--dropdown-item-hover);
        }
      }

      .ant-select-dropdown-menu {
        overflow-y: hidden;

        &:hover {
          overflow-y: auto;
        }

        &::-webkit-scrollbar-thumb {
          background-color: unset;
          border-radius: 4px;
        }

        &::-webkit-scrollbar {
          width: 7px;
        }

        &:hover::-webkit-scrollbar {
          width: 7px;
        }

        &:hover::-webkit-scrollbar-thumb {
          background-color: rgba(139, 139, 139, 0.53);
          border-radius: 4px;
        }
      }
    }
  }
}

:not(:root):fullscreen::backdrop {
  background: var(--background-color);
  background-image: var(--background-img);
}
